*{
  cursor: url(./images/鼠标.png),pointer !important;
}
body{
  background: url(./images/16.jpg) no-repeat;
background-size: 100%;
}
/* 整体盒子 */
.box {
  position: relative;
  display: flex;
  width: 290px;
  height: 400px;
 margin-right: 10px;
}
/* 建立两个盒子，通过定位将两个盒子重叠放置，一个为卡片正面，一个为卡片背面。通过动画效果，将两个盒子同时翻转，并且在合适的时机将正面的盒子隐藏，实现出卡片翻转效果。*/

/* 放在下面的盒子，卡片背面 */
.box .pic{
  position: absolute;
  width: 284px;
  height: 394px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-bottom: 2px solid #bbb;
  border-top: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  transition: all .3s ease;
  background-image: linear-gradient(pink,rgb(248, 14, 229));
  opacity: 0;
}
/* 下面盒子的图片，也就是卡片的反面 */
.box .pic img{
  display: block;
  width: 284px;
  height: 394px;
  /* transform-style: preserve-3d; */
}
/* 放在上面的盒子，也就是卡片的正面 */
.box .a1{
  position: absolute;
  top: 0;
  left: 0;
  width: 290px;
  height: 400px;
  margin-right: 10px;
  background-color: rgb(83, 82, 82);
  border: 1px solid #ccc;
  border-bottom: 2px solid #bbb;
  border-top: 1px solid #ddd;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  transition: all .3s;
  opacity: 0.5;
}
/* 给卡片正面盒子添加动画效果，让盒子翻面，在翻到90度的时候，让正面的盒子消失，同时背面的盒子显示出来 */
.box .a1:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 40px -24px rgba(0, 36, 100, .5);
  animation: move01 2s linear forwards;
}
@keyframes move01{
  1%{
    opacity: 1;
  }
  25%{
    transform: rotateY(0);
  }
  62%{
    opacity: 1;
  }
  62.5%{
    transform: rotateY(90deg);
    opacity: 0;
  }
  100%{
    opacity: 0;
  }
}
/* 给背面的盒子添加动画效果，同时和正面的盒子一起旋转。当正面盒子旋转至90度时，正面的盒子会消失，反面的盒子出现，呈现出卡片翻转效果。 */
.box:hover .pic{
  transform: translateY(-6px);
  box-shadow: 0 26px 40px -24px rgba(0, 36, 100, .5);
  animation: move02 1.5s 0.5s linear forwards;
}
@keyframes move02{
  48%{
    opacity: 0;
  }
  49%{
    opacity: 1;
  }
  50%{
    transform: rotateY(90deg);
    
  }
  100%{
    transform: rotateY(18deg);
    opacity: 1;
  }
}
/* 盒子上面的灰色闪光效果 */
.box .light {
  cursor: pointer;
  position: absolute;
  left: -114%;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: -webkit-linear-gradient(0deg, hsla(0, 92%, 49%, 0), rgba(255, 255, 255, 0.5), hsla(0, 0%, 100%, 0));
  transform: skewx(-16deg);
 
}

.box .a1:hover .light {
  transition: all .5s ease;
  left: 114%
}
/* 盒子反面的紫色闪光效果 */
.box .light01{
  cursor: pointer;
  position: absolute;
  left: -114%;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: -webkit-linear-gradient(0deg, hsla(0, 92%, 49%, 0), rgba(247, 6, 118, 0.603), hsla(0, 0%, 100%, 0));
  transform: skewx(-16deg);

}
.box:hover .light01{
  animation: light01 .5s 2s linear forwards;
}
@keyframes light01{
  to{
    transition: all .5s ease;
    left: 114%;
  }
}